<template>
    <div class="wrap">
        <div class="header">
            <div class="title">累计为您自动过滤广告</div>
            <div class="num">{{num}}</div>
        </div>
        <div class="operation">
            <div class="one">
                <div class="one-shoud">手动屏蔽广告</div>
                <div class="one-tilte">长按网页广告后选择【屏蔽广告】即可</div>
            </div>
            <div>
                <mt-switch v-model="switchvalue" @change = "submit"></mt-switch>
            </div>
        </div>
        <div class="bottom">
            <div>管理手动标识的广告</div>
            <div>暂无已标识的广告</div>
        </div>
    </div>
</template>
<script>
    import { Switch } from 'mint-ui';
    import {pageConfig} from '@/config';
    Vue.component(Switch.name, Switch);

    export default {
        name: 'noads',
        data(){
            return {
                switchvalue: false,
                num: 10
            }
        },
        created: function () {
            if (this.$native.isAndroid || this.$native.isIOS) {
                let token = this.$route.query.token;
                if (!token) {
                } else {
                    //登陆之后
                    this.$user.setToken(token);
                    this.getDetail();
                }

            } else {
                if (!this.$user.is_login()) {
                    this.$user.jumpLogin();
                } else {
                    this.getDetail();
                }
            }

        },
        methods: {
            getDetail() {
                this.$http.$ajax('getOn', pageConfig.public, {
                }, {loading: '获取信息...', success:(res)=> {
                    if (res.data === null) {
                        this.switchvalue = false
                    } else {
                        this.switchvalue = res.data.is_on === 1 ? true : false;
                        this.num = res.data.count;
                    }
                }});
            },
            submit(data) {
                this.$http.$ajax('on', pageConfig.public, {
                    on: data ? 0 : 1,
                }, {loading: '处理中...'});
            }
        },
        computed: {

        }
    }
</script>
<style scoped>
    .wrap {
        height: 100vh;
        background-color: #F6F6F6;
    }
    .bottom {
        margin-top: 5px;
        font-size:20px;
        font-weight:400;
        color:#8D8D8D;
        line-height:42px;
        background-color: #FFFFFF;
        height: 70px;
        padding: 30px;
    }
    .operation {
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        padding: 31px;
    }
    .one-shoud {
        font-size:30px;
        font-weight:400;
        color:#353535;
        line-height:42px;
    }
    .one-tilte {
        font-size:20px;
        font-weight:400;
        color:#8D8D8D;
        line-height:42px;
    }
    .header {
        display: flex;
        justify-content: center;
        height: 190px;
        align-items: center;
        flex-direction: column;
        background-color: #F6F6F6;
    }
    .title {
        font-size:22px;
        font-weight:400;
        line-height:42px;
        color: #8D8D8D;
    }
    .num {
        font-size:57px;
        font-weight:400;
        color:#2C79D6;
        line-height:108px;
    }
</style>
